<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>

    <table border="1" cellspacing="0" style="margin:auto">

        <thead>
            <tr>
                <th>序号</th>
                <th>学生ID</th>
                <th>学生姓名</th>
                <th>学生年龄</th>
                <th>学生性别</th>
                <th>学生班级</th>
                <th>学生成绩</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

<script>
    let tbodyObj = document.querySelector('table tbody')
    let msgArr = []
    let firstName = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦'
    let second =    '阿萨斯方法计算的你几点睡觉'
    console.log(firstName.length);
    let third =     '大幅降低算法计算定积分'
    let gender = '男女'
    function random(min,max){
          return Math.floor( Math.random() * ( max - min + 1 ) + min )
        }
    for(let i = 0;i<=1000;i++){
        msgArr.push({
            id:i+1,
            name:firstName[random(0,firstName.length-1)] + second[random(0,second.length-1)] +third[random(0,third.length-1)],
            age:random(19,35),
            gender:gender[random(0,gender.length-1)],
            class:random(1201,1215),
            score:random(60,95),
        })
    }
    // console.log(msgArr);
    // 分页开始位置 ： 当前页 - 1) * 每页显示条数   
    // 分页结束位置为【起始位置 +　当前页显示
    let pagenow = 1
    let pageSize = 10
    let start = (pagenow - 1) * pageSize
    // for(let i = 0;i<10;i++){   // 此处的i为分页的开始位置，条数】
    for(let i = start;i<start + pageSize;i++){  
        let trObj = document.createElement('tr')
        trObj.style.textAlign = 'center'
        trObj.innerHTML = `
        <td></td>
        <td>${msgArr[i].id}</td>
        <td>${msgArr[i].name}</td>
        <td>${msgArr[i].age}</td>
        <td>${msgArr[i].gender}</td>
        <td>${msgArr[i].class}</td>
        <td>${msgArr[i].score}</td>
        `
        tbodyObj.appendChild(trObj)
    }




</script>









    <div class="page page1"></div>
    <div class="page page2"></div>

    <script src="./page完善.js"></script>
    <script>
        let page1 = new Page('.page1',{
            pageTag: {
            first: '首页',
            prev: '上一页',
            list: null,
            next: '下一页',
            last: '末页',
        },
        pageInfo: {
            pageNum: 1,     // 当前页数（默认选中页码）
            pageSize: 10,    // 每页显示条数  
            totalData: 1000, // 总条数 
            totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
        }
        })

        let page2 = new Page('.page2',{
            pageTag: {
            first: 'first',
            prev: 'prev',
            list: null,
            next: 'next',
            last: 'last',
        },
        pageInfo: {
            pageNum: 1,     // 当前页数
            pageSize: 10,    // 每页显示条数  
            totalData: 80, // 总条数 
            totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
        },

        // 回调函数，当需要调用是调用   //直接用原型方法写 调用
    //     callback(pagenum) {
    //     // console.log('回调函数当前页', pagenum)
    //     let pagesize = 10
    //     let startno = (pagenum -1)*pagesize
    //     let html = ''
    //     for (let i = startno; i<startno+pagesize; i++) {
    //         // tableDataArr[i]
    //         html += `
    //             <tr>
    //             <td></td>
    //             <td>${tableDataArr[i].id}</td>
    //             <td>${tableDataArr[i].name}</td>
    //             <td>${tableDataArr[i].age}</td>
    //             <td>${tableDataArr[i].gender}</td>
    //             <td>${tableDataArr[i].class}</td>
    //             <td>${tableDataArr[i].score}</td>
    //             </tr>
    //         `
    //     }
    //     // 拼接数据最后覆盖
    //     document.querySelector('tbody').innerHTML = html

    // }
        })
    </script>
    
</body>
</html>